<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
      :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover" v-if="$auth.hasRoleOr(['superadmin'])" body-style="auto">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
            <el-form-item label="经营主体编码" prop="col09">
              <el-input v-model="queryParams.col09" placeholder="请输入经营主体编码" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="用户ID" prop="col03">
              <el-input v-model="queryParams.col03" placeholder="请输入用户ID" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="店中商名称" prop="col04">
              <el-input v-model="queryParams.col04" placeholder="请输入店中商名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="店中商编码" prop="col05">
              <el-input v-model="queryParams.col05" placeholder="请输入店中商编码" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="经营主体名称" prop="col07">
              <el-input v-model="queryParams.col07" placeholder="请输入经营主体名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery" round>搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery" round>重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5" v-if="$auth.hasRoleOr(['business'])">
            <el-button type="warning" plain icon="Download" @click="handleExport"
              v-hasPermi="['commission:commissionList:export']">导出 Excel </el-button>
          </el-col>
        </el-row>

        <el-row :gutter="10" class="mb8" v-if="$auth.hasRoleOr(['superadmin'])">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd"
              v-hasPermi="['commission:commissionList:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
              v-hasPermi="['commission:commissionList:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
              v-hasPermi="['commission:commissionList:remove']">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport"
              v-hasPermi="['commission:commissionList:export']" v-if="$auth.hasRoleOr(['business'])">导出</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-dropdown class="mt-[1px]">
              <el-button plain type="info">
                更多
                <el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item>
                  <el-dropdown-item icon="Top" @click="handleImport"> 导入数据</el-dropdown-item>
                  <el-dropdown-item icon="Download" @click="handleExport"> 导出数据</el-dropdown-item>
                  <el-dropdown-item icon="Help" @click="handleTeaching"> 导入教程</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="commissionListList" @selection-change="handleSelectionChange" height="450" max-height="450">
        <template v-if="headerArray">
        <el-table-column v-if="$auth.hasRoleOr(['superadmin'])" type="selection" width="55" align="center" />
        <el-table-column :label="headerArray[1].label" align="center" prop="col00" sortable width="120" show-overflow-tooltip/>
        <el-table-column :label="headerArray[3].label" align="center" prop="col01" />
        <el-table-column :label="headerArray[4].label" align="center" prop="col02" width="110" show-overflow-tooltip/>
        <el-table-column :label="headerArray[5].label" align="center" prop="col03" width="120" show-overflow-tooltip/>
        <el-table-column :label="headerArray[6].label" align="center" prop="col04" width="140" show-overflow-tooltip/>
        <el-table-column :label="headerArray[7].label" align="center" prop="col05" sortable width="140" show-overflow-tooltip/>
        <el-table-column :label="headerArray[8].label" align="center" prop="col06" width="80"/>
        <el-table-column :label="headerArray[9].label" align="center" prop="col07" width="180" show-overflow-tooltip/>
        <el-table-column :label="headerArray[10].label" align="center" prop="col08" />
        <el-table-column v-if="$auth.hasRoleOr(['superadmin'])" :label="headerArray[2].label" align="center" prop="col09"  fixed sortable width="200" show-overflow-tooltip/>
        <el-table-column v-if="$auth.hasRoleOr(['business'])" :label="headerArray[2].label" align="center" prop="col09"  fixed width="200" show-overflow-tooltip/>
        <el-table-column :label="headerArray[11].label" show-overflow-tooltip align="center" prop="col10" width="100"/>
        <el-table-column :label="headerArray[12].label" align="center" prop="col11" width="150" show-overflow-tooltip/>
        <el-table-column :label="headerArray[13].label" show-overflow-tooltip align="center" prop="col12" width="100"/>
        <el-table-column :label="headerArray[14].label" align="center" prop="col13" />
        <el-table-column :label="headerArray[15].label" align="center" prop="col14" width="100"/>
        <el-table-column :label="headerArray[16].label" align="center" prop="col15" width="120"/>
        <el-table-column :label="headerArray[17].label" align="center" prop="col16" width="180"/>
        <el-table-column :label="headerArray[18].label" align="center" prop="col17" width="120"/>
        <el-table-column :label="headerArray[19].label" align="center" prop="col18" width="100" show-overflow-tooltip/>
        <el-table-column :label="headerArray[20].label" align="center" prop="col19" width="120"/>
        <el-table-column :label="headerArray[21].label" align="center" prop="col20" />
        <el-table-column :label="headerArray[22].label" align="center" prop="col21" width="120" show-overflow-tooltip/>
        <el-table-column :label="headerArray[23].label" align="center" prop="col22" width="160"/>
        <el-table-column :label="headerArray[24].label" align="center" prop="col23" />
        <el-table-column :label="headerArray[25].label" align="center" prop="col24" />
        <el-table-column :label="headerArray[26].label" align="center" prop="col25"  width="90"/>
        <el-table-column :label="headerArray[27].label" align="center" prop="col26" width="120"/>
        <el-table-column :label="headerArray[28].label" align="center" prop="col27" width="120"/>
        <el-table-column :label="headerArray[29].label" align="center" prop="col28" width="160"/>
        <el-table-column :label="headerArray[30].label" align="center" prop="col29" width="120"/>
        <el-table-column :label="headerArray[31].label" align="center" prop="col30" />
        <el-table-column :label="headerArray[32].label" align="center" prop="col31" />
        <el-table-column :label="headerArray[33].label" align="center" prop="col32" width="120" show-overflow-tooltip/>
        <el-table-column :label="headerArray[34].label" align="center" prop="col33" />
        <el-table-column :label="headerArray[35].label" align="center" prop="col34" show-overflow-tooltip/>
        <el-table-column :label="headerArray[36].label" align="center" prop="col35" width="160"/>
        <el-table-column :label="headerArray[37].label" align="center" prop="col36" width="160"/>
        <el-table-column :label="headerArray[38].label" align="center" prop="col37" width="200" show-overflow-tooltip/>
        <el-table-column :label="headerArray[39].label" align="center" prop="col38" width="200" show-overflow-tooltip/>
        <el-table-column :label="headerArray[40].label" align="center" prop="col39" width="160"/>
        <el-table-column :label="headerArray[41].label" align="center" prop="col40" width="160"/>
        <el-table-column :label="headerArray[42].label" align="center" prop="col41" width="120"/>
        <el-table-column :label="headerArray[43].label" align="center" prop="col42" width="160" show-overflow-tooltip/>
        <el-table-column :label="headerArray[44].label" align="center" prop="col43" width="160" show-overflow-tooltip/>
        <el-table-column :label="headerArray[45].label" align="center" prop="col44" width="130"/>
        <el-table-column :label="headerArray[46].label" align="center" prop="col45" width="130"/>
        <el-table-column :label="headerArray[47].label" align="center" prop="col46" width="160"/>
        <el-table-column :label="headerArray[48].label" align="center" prop="col47" width="160" show-overflow-tooltip/>
        <el-table-column :label="headerArray[49].label" align="center" prop="col48" width="160" show-overflow-tooltip/>
        <el-table-column :label="headerArray[50].label" align="center" prop="col49" width="160"/>
        <el-table-column v-if="$auth.hasRoleOr(['superadmin'])"  label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                v-hasPermi="['commission:commissionList:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                v-hasPermi="['commission:commissionList:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        </template>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <!-- 添加或修改佣金清单对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="commissionListFormRef" :model="form" :rules="rules" label-width="170px">
        <el-form-item label="序号" prop="col00">
          <el-input v-model="form.col00" placeholder="请输入序号" />
        </el-form-item>
        <el-form-item label="帐期" prop="col01">
          <el-input v-model="form.col01" placeholder="请输入帐期" />
        </el-form-item>
        <el-form-item label="用户号码" prop="col02">
          <el-input v-model="form.col02" placeholder="请输入用户号码" />
        </el-form-item>
        <el-form-item label="用户ID" prop="col03">
          <el-input v-model="form.col03" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item label="店中商名称" prop="col04">
          <el-input v-model="form.col04" placeholder="请输入店中商名称" />
        </el-form-item>
        <el-form-item label="店中商编码" prop="col05">
          <el-input v-model="form.col05" placeholder="请输入店中商编码" />
        </el-form-item>
        <el-form-item label="场次ID" prop="col06">
          <el-input v-model="form.col06" placeholder="请输入场次ID" />
        </el-form-item>
        <el-form-item label="经营主体名称" prop="col07">
          <el-input v-model="form.col07" placeholder="请输入经营主体名称" />
        </el-form-item>
        <el-form-item label="渠道" prop="col08">
          <el-input v-model="form.col08" placeholder="请输入渠道" />
        </el-form-item>
        <el-form-item label="经营主体编码" prop="col09">
          <el-input v-model="form.col09" placeholder="请输入经营主体编码" />
        </el-form-item>
        <el-form-item label="方案名称" prop="col10">
          <el-input v-model="form.col10" placeholder="请输入方案名称" />
        </el-form-item>
        <el-form-item label="帐目类型名称" prop="col11">
          <el-input v-model="form.col11" placeholder="请输入帐目类型名称" />
        </el-form-item>
        <el-form-item label="类型" prop="col12">
          <el-input v-model="form.col12" placeholder="请输入类型" />
        </el-form-item>
        <el-form-item label="类型2" prop="col13">
          <el-input v-model="form.col13" placeholder="请输入类型2" />
        </el-form-item>
        <el-form-item label="二级支撑费" prop="col14">
          <el-input v-model="form.col14" placeholder="请输入二级支撑费" />
        </el-form-item>
        <el-form-item label="积分大类名称" prop="col15">
          <el-input v-model="form.col15" placeholder="请输入积分大类名称" />
        </el-form-item>
        <el-form-item label="积分二类名称" prop="col16">
          <el-input v-model="form.col16" placeholder="请输入积分二类名称" />
        </el-form-item>
        <el-form-item label="积分小类名称" prop="col17">
          <el-input v-model="form.col17" placeholder="请输入积分小类名称" />
        </el-form-item>
        <el-form-item label="积分达量ID" prop="col18">
          <el-input v-model="form.col18" placeholder="请输入积分达量ID" />
        </el-form-item>
        <el-form-item label="非保护期封顶值" prop="col19">
          <el-input v-model="form.col19" placeholder="请输入非保护期封顶值" />
        </el-form-item>
        <el-form-item label="房租" prop="col20">
          <el-input v-model="form.col20" placeholder="请输入房租" />
        </el-form-item>
        <el-form-item label="销售品套餐ID" prop="col21">
          <el-input v-model="form.col21" placeholder="请输入销售品套餐ID" />
        </el-form-item>
        <el-form-item label="套餐名称" prop="col22">
          <el-input v-model="form.col22" placeholder="请输入套餐名称" />
        </el-form-item>
        <el-form-item label="支付类型" prop="col23">
          <el-input v-model="form.col23" placeholder="请输入支付类型" />
        </el-form-item>
        <el-form-item label="套餐价值" prop="col24">
          <el-input v-model="form.col24" placeholder="请输入套餐价值" />
        </el-form-item>
        <el-form-item label="主副卡标识" prop="col25">
          <el-input v-model="form.col25" placeholder="请输入主副卡标识" />
        </el-form-item>
        <el-form-item label="是否融合套餐" prop="col26">
          <el-input v-model="form.col26" placeholder="请输入是否融合套餐" />
        </el-form-item>
        <el-form-item label="综合折扣率" prop="col27">
          <el-input v-model="form.col27" placeholder="请输入综合折扣率" />
        </el-form-item>
        <el-form-item label="可选包折扣ID" prop="col28">
          <el-input v-model="form.col28" placeholder="请输入可选包折扣ID" />
        </el-form-item>
        <el-form-item label="可选包折扣金额" prop="col29">
          <el-input v-model="form.col29" placeholder="请输入可选包折扣金额" />
        </el-form-item>
        <el-form-item label="计算佣金" prop="col30">
          <el-input v-model="form.col30" placeholder="请输入计算佣金" />
        </el-form-item>
        <el-form-item label="佣金_元" prop="col31">
          <el-input v-model="form.col31" placeholder="请输入佣金_元" />
        </el-form-item>
        <el-form-item label="扣罚原因" prop="col32">
          <el-input v-model="form.col32" placeholder="请输入扣罚原因" />
        </el-form-item>
        <el-form-item label="原始账期" prop="col33">
          <el-input v-model="form.col33" placeholder="请输入原始账期" />
        </el-form-item>
        <el-form-item label="班组ID" prop="col34">
          <el-input v-model="form.col34" placeholder="请输入班组ID" />
        </el-form-item>
        <el-form-item label="受理工号" prop="col35">
          <el-input v-model="form.col35" placeholder="请输入受理工号" />
        </el-form-item>
        <el-form-item label="受理时间" prop="col36">
          <el-input v-model="form.col36" placeholder="请输入受理时间" />
        </el-form-item>
        <el-form-item label="订单号" prop="col37">
          <el-input v-model="form.col37" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="终端号" prop="col38">
          <el-input v-model="form.col38" placeholder="请输入终端号" />
        </el-form-item>
        <el-form-item label="促销人ID" prop="col39">
          <el-input v-model="form.col39" placeholder="请输入促销人ID" />
        </el-form-item>
        <el-form-item label="用户在网时长" prop="col40">
          <el-input v-model="form.col40" placeholder="请输入用户在网时长" />
        </el-form-item>
        <el-form-item label="用户入网年月" prop="col41">
          <el-input v-model="form.col41" placeholder="请输入用户入网年月" />
        </el-form-item>
        <el-form-item label="原始受理班组ID" prop="col42">
          <el-input v-model="form.col42" placeholder="请输入原始受理班组ID" />
        </el-form-item>
        <el-form-item label="促销班组ID" prop="col43">
          <el-input v-model="form.col43" placeholder="请输入促销班组ID" />
        </el-form-item>
        <el-form-item label="提档前主套餐价值" prop="col44">
          <el-input v-model="form.col44" placeholder="请输入提档前主套餐价值" />
        </el-form-item>
        <el-form-item label="提档后主套餐价值" prop="col45">
          <el-input v-model="form.col45" placeholder="请输入提档后主套餐价值" />
        </el-form-item>
        <el-form-item label="用户入网月主套餐价值" prop="col46">
          <el-input v-model="form.col46" placeholder="请输入用户入网月主套餐价值" />
        </el-form-item>
        <el-form-item label="行销人员归属班组ID" prop="col47">
          <el-input v-model="form.col47" placeholder="请输入行销人员归属班组ID" />
        </el-form-item>
        <el-form-item label="行销人员ID" prop="col48">
          <el-input v-model="form.col48" placeholder="请输入行销人员ID" />
        </el-form-item>
        <el-form-item label="销售品实例标识" prop="col49">
          <el-input v-model="form.col49" placeholder="请输入销售品实例标识" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!--    用户手册-->
    <el-dialog v-model="teaching.open" :title="teaching.title" style="height: 800px">
      <p>欢迎查看用户手册</p>
      <div class="block">
        <el-carousel trigger="click" height="500px" @change="handleCarouselChange" loop="false" autoplay="false"
          interval="6000">
          <el-carousel-item v-for="(item, index) in imgList" :key="item">
            <el-image :src="item"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="步骤 1" description="点击下载导入模板"></el-step>
        <el-step title="步骤 2" description="将数据导入模板中"></el-step>
        <el-step title="步骤 3" description="点击另存为"></el-step>
        <el-step title="步骤 4" description="选择csv后保存"></el-step>
        <el-step title="步骤 5" description="点击导入数据，将csv文件导入"></el-step>
      </el-steps>
    </el-dialog>


    <!-- 用户导入对话框 -->
    <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
      <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls,  .CSV" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <el-icon class="el-icon--upload">
          <i-ep-upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="text-center el-upload__tip">
            <div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否清空已经存在的用户数据</div>
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="CommissionList" lang="ts">
import { listCommissionList, getCommissionList, delCommissionList, addCommissionList, updateCommissionList ,exportCommissionList} from '@/api/commission/commissionList';
import { CommissionListVO, CommissionListQuery, CommissionListForm } from '@/api/commission/commissionList/types';
import { globalHeaders } from "@/utils/request";
import ScrollPane from "@/layout/components/TagsView/ScrollPane.vue";
import { valueEquals } from "element-plus";
import { LoadingInstance } from 'element-plus/es/components/loading/src/loading';



import step1 from '@/assets/images/步骤一.png';
import step2 from '@/assets/images/步骤二.png';
import step3 from '@/assets/images/步骤三.png';
import step4 from '@/assets/images/步骤四.png';
import step5 from '@/assets/images/步骤五.png';
import request from "@/utils/request";


const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const commissionListList = ref<CommissionListVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
let active = ref(0);
let downloadLoadingInstance: LoadingInstance;

function handleCarouselChange(index) {
  console.log('当前索引:', index);
  active.value = index;
}

const imgList = ref<Array<string>>([step1, step2, step3, step4, step5]);

const teaching = reactive<DialogOption>({
  open: false,
  title: '',
});

/*** 用户导入参数 */
const upload = reactive<ImportOption>({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: '',
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: globalHeaders(),
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + '/commission/commissionList/importData'
});

const queryFormRef = ref<ElFormInstance>();
const commissionListFormRef = ref<ElFormInstance>();
const uploadRef = ref<ElUploadInstance>();


const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const initFormData: CommissionListForm = {
  id: undefined,
  col00: undefined,
  col01: undefined,
  col02: undefined,
  col03: undefined,
  col04: undefined,
  col05: undefined,
  col06: undefined,
  col07: undefined,
  col08: undefined,
  col09: undefined,
  col10: undefined,
  col11: undefined,
  col12: undefined,
  col13: undefined,
  col14: undefined,
  col15: undefined,
  col16: undefined,
  col17: undefined,
  col18: undefined,
  col19: undefined,
  col20: undefined,
  col21: undefined,
  col22: undefined,
  col23: undefined,
  col24: undefined,
  col25: undefined,
  col26: undefined,
  col27: undefined,
  col28: undefined,
  col29: undefined,
  col30: undefined,
  col31: undefined,
  col32: undefined,
  col33: undefined,
  col34: undefined,
  col35: undefined,
  col36: undefined,
  col37: undefined,
  col38: undefined,
  col39: undefined,
  col40: undefined,
  col41: undefined,
  col42: undefined,
  col43: undefined,
  col44: undefined,
  col45: undefined,
  col46: undefined,
  col47: undefined,
  col48: undefined,
  col49: undefined,
}
const data = reactive<PageData<CommissionListForm, CommissionListQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    col00: undefined,
    col01: undefined,
    col02: undefined,
    col03: undefined,
    col04: undefined,
    col05: undefined,
    col06: undefined,
    col07: undefined,
    col08: undefined,
    col09: undefined,
    col10: undefined,
    col11: undefined,
    col12: undefined,
    col13: undefined,
    col14: undefined,
    col15: undefined,
    col16: undefined,
    col17: undefined,
    col18: undefined,
    col19: undefined,
    col20: undefined,
    col21: undefined,
    col22: undefined,
    col23: undefined,
    col24: undefined,
    col25: undefined,
    col26: undefined,
    col27: undefined,
    col28: undefined,
    col29: undefined,
    col30: undefined,
    col31: undefined,
    col32: undefined,
    col33: undefined,
    col34: undefined,
    col35: undefined,
    col36: undefined,
    col37: undefined,
    col38: undefined,
    col39: undefined,
    col40: undefined,
    col41: undefined,
    col42: undefined,
    col43: undefined,
    col44: undefined,
    col45: undefined,
    col46: undefined,
    col47: undefined,
    col48: undefined,
    col49: undefined,
    params: {
    }
  },
  rules: {
    id: [
      { required: true, message: "ID不能为空", trigger: "blur" }
    ],
    col00: [
      { required: true, message: "序号不能为空", trigger: "blur" }
    ],
    col01: [
      { required: true, message: "账期不能为空", trigger: "blur" }
    ],
    col03: [
      { required: true, message: "用户ID不能为空", trigger: "blur" }
    ],
    col04: [
      { required: true, message: "店中商名称不能为空", trigger: "blur" }
    ],
    col05: [
      { required: true, message: "店中商编码不能为空", trigger: "blur" }
    ],
    col07: [
      { required: true, message: "经营主体名称不能为空", trigger: "blur" }
    ],
    col09: [
      { required: true, message: "经营主体编码不能为空", trigger: "blur" }
    ],
  }
});




const { queryParams, form, rules } = toRefs(data);

/** 查询佣金清单列表 */
const getList = async () => {
  loading.value = true;
  const res = await listCommissionList(queryParams.value);
  commissionListList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}

let headerArray = null;
const getHeader = async () => {
  const result = await request({
    url: '/commission/commissionHeader/list',
    method: 'get',
    params: queryParams.value
  });
  headerArray = Object.entries(result.rows[0]).map(([key, value]) => ({
    key,
    label: value
  }));
  console.log(headerArray);
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  commissionListFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: CommissionListVO[]) => {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加佣金清单";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: CommissionListVO) => {
  reset();
  const _id = row?.id || ids.value[0]
  const res = await getCommissionList(_id);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = "修改佣金清单";
}

/** 提交按钮 */
const submitForm = () => {
  commissionListFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.id) {
        await updateCommissionList(form.value).finally(() => buttonLoading.value = false);
      } else {
        await addCommissionList(form.value).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialog.visible = false;
      await getList();
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: CommissionListVO) => {
  const _ids = row?.id || ids.value;
  await proxy?.$modal.confirm('是否确认删除佣金清单编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
  await delCommissionList(_ids);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** 导入按钮操作 */
const handleImport = () => {
  upload.title = '用户导入';
  upload.open = true;
};

// 用户手册
const handleTeaching = () => {
  teaching.title = '用户教程';
  teaching.open = true;
};

/** 下载模板操作 */
const importTemplate = () => {
  proxy?.download('commission/commissionList/importTemplate', {}, `commissionList_template_${new Date().getTime()}.xlsx`);
};

/**文件上传中处理 */
const handleFileUploadProgress = () => {
  upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response: any, file: UploadFile) => {
  upload.open = false;
  upload.isUploading = false;
  uploadRef.value?.handleRemove(file);
  ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
    dangerouslyUseHTMLString: true
  });
  getList();
};

/** 提交上传文件 */
function submitFileForm() {
  uploadRef.value?.submit();
}


//提示正在下载，请勿重复提交
const open2 = () => {
  ElMessage({
    message: '正在下载，请勿重复提交',
    type: 'warning',
    plain: true,
  })
}

//下载操作
const openDownload = () => {
  ElMessageBox.confirm(
    '文件下载，大约需要1到5分钟',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info',
    }
  )
    .then(() => {
      exportCommissionList(queryParams.value)
      downloadLoadingInstance = ElLoading.service({ text: '正在下载数据，请稍等几分钟', background: 'rgba(0, 0, 0, 0.7)' });
      setTimeout(() => {
        downloadLoadingInstance.close()
      }, 3000)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消导出',
      })
    })
}

/** 导出按钮操作 */
const handleExport = async () => {
  // downloadLoadingInstance = ElLoading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' });
  let flag = localStorage.getItem('loading')
  if (flag === '0') {
    //正在下载中，请勿重复提交
    open2()
  } else {
    //提交下载请求
    openDownload()
  }
}

onMounted(() => {
  getHeader();
  getList();
});
</script>
